<template>
  <div class="h-center">
    <div class="arrows">
      <span class="active">
        <a-icon type="left" class="ico" @click="fallBack" />
      </span>
      <span class="active">
        <a-icon type="right" class="ico" @click="forward" />
      </span>
    </div>
    <div class="search">
      <a-icon type="search" class="ico" />
      <input
        type="text"
        class="inp"
        placeholder="搜索"
        @focus="handleFocus"
        @input="handleInput"
        @keydown.enter="handleEnter"
      />
    </div>
    <div class="listen">
      <a-icon type="audio" class="ico" />
    </div>
  </div>
</template>

<script>
import axios from "@/utils/axios";
export default {
  name: "h-center",
  props: ["searchHide", "hotSearchLists", "word", "searchWords", "isFocus"],
  data() {
    return {};
  },
  methods: {
    fallBack() {
      this.$router.back();
    },
    forward() {
      this.$router.forward();
    },
    handleFocus(e) {
      if (!e.target.value) {
        this.$emit("changeIsFocus", true);
      }
      this.$emit("changeSearchHide", false);
      axios.get("/search/hot/detail").then((res) => {
        this.$emit("changeHotSearchLists", res.data);
      });
    },
    input(value) {
      if (!value) {
        return;
      }
      axios
        .get("/search", { params: { keywords: value, type: 1 } })
        .then((res) => {
          console.log(res);
          this.$emit("changeIsFocus", false);
          this.$emit("changeWord", this.word);
          this.$emit("changeSearchWords", res.result.songs);
        });
    },
    handleInput(e) {
      if (!e.target.value) {
        this.$emit("changeIsFocus", true);
      }
      function debounce(fn, time) {
        let timer = null;
        return function (...args) {
          // 不断的触发这个函数最终等到停下触发的时候才会在定时器完成去执行对应的函数
          // 每次调用这个函数看如果已经开过定时器，清楚重新开启
          if (timer) {
            clearTimeout(timer);
          }
          timer = setTimeout(() => {
            fn(...args);
          }, time);
        };
      }
      if (!this.lock) {
        this.fn = debounce(this.input, 1000);
        this.lock = true;
      }
      this.fn && this.fn(e.target.value);
    },
    handleEnter(e) {
      // 按下了回车键
      if (e.target.value) {
        this.$router.push(`/main/search/${e.target.value}`);
      }
    },
  },
  mounted() {
    //   防抖节流使用的
    this.lock = false;
    this.fn = "";
  },
};
</script>

<style lang="scss" scoped>
.h-center {
  display: flex;
  align-items: center;
  margin: 4rem;
  .arrows {
    margin-right: 2rem;
    color: inherit;
    span {
      display: inline-block;
      height: 2.5rem;
      width: 2.5rem;
      margin-left: 1rem;
      text-align: center;
      line-height: 2.5rem;
      border-radius: 50%;
      color: #eaa;
      background: rgba(0, 0, 0, 0.05);
      cursor: pointer;
    }
    .active {
      &:hover {
        color: #eee;
        background: rgba(0, 0, 0, 0.1);
      }
    }
  }
  .search {
    position: relative;
    width: 18rem;
    height: 3.5rem;
    padding: 0.5rem 2rem;
    padding-left: 3rem;
    border-radius: 3rem;
    border: 1px solid #ccc;
    text-align: center;
    .inp {
      width: 14rem;
    }
    .inp::first-line {
      color: #fff;
    }
    .ico {
      position: absolute;
      left: 1rem;
      top: 0.8rem;
      color: #fff;
      font-size: 1.6rem;
    }
  }
  .listen {
    width: 3.5rem;
    height: 3.5rem;
    margin-left: 1rem;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    line-height: 3.5rem;
    background: rgba(0, 0, 0, 0.1);
    .ico {
      color: #fff;
      font-size: 1.8rem;
    }
  }
}
</style>